﻿var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
ctx.strokeStyle = "white";
ctx.strokeRect(0, 0, 858, 520);

var picgarbage = [];
picgarbage[0]="images/Garbage-clour/leaf.png";
picgarbage[1]="images/Garbage-clour/lamp.png";
picgarbage[2]="images/Garbage-clour/battery.png";
picgarbage[3]="images/Garbage-clour/botton.png";
picgarbage[4]="images/Garbage-clour/cola.png";
picgarbage[5]="images/Garbage-clour/snack.png";
picgarbage[6]="images/Garbage-clour/fish.png";
picgarbage[7]="images/Garbage-clour/tissue.png";

var picicon = [];
picicon[0]="images/Player-clour/icon1.png";
picicon[1]="images/Player-clour/icon2.png";
picicon[2]="images/Player-clour/icon3.png";
picicon[3]="images/Player-clour/icon4.png";

var picbin=[]
picbin[0]="images/bin/green-bin.png";
picbin[1]="images/bin/red-bin.png";
picbin[2]="images/bin/yellow-bin.png";

var window1="images/window.png";
var picpoint="images/point.png";
var green="images/green.jpg";

var picleft="images/Left.png";
var picright="images/Right.png";
var picok="images/OK.png";
var picchoose="images/choose.png";
var picscore="images/score.png";
var picborad="images/bggame.png";
var picans="images/ans.png";

var x = [];
var y = [];
x[0] = 681;
y[0] = 412;
x[1] = 619;
y[1] = 397;
x[2] = 539;
y[2] = 383;
x[3] = 482;
y[3] = 369;
x[4] = 426;
y[4] = 369;
x[5] = 369;
y[5] = 369;
x[6] = 312;
y[6] = 383;
x[7] = 256;
y[7] = 383;
x[8] = 198;
y[8]= 369;
x[9]= 185;
y[9]= 326;
x[10] = 227;
y[10] = 298;
x[11] = 298;
y[11] = 284;
x[12] = 355;
y[12] = 270;
x[13] = 421;
y[13] = 270;
x[14] = 482;
y[14] = 270;
x[15] = 539;
y[15] = 270;
x[16] = 596;
y[16] = 270;
x[17] = 652;
y[17] = 284;
x[18] = 709;
y[18] = 270;
x[19] = 752;
y[19] = 227;
x[20] = 709;
y[20] = 185;
x[21] = 652;
y[21] = 171;
x[22] = 581;
y[22] = 156;
x[23] = 524;
y[23] = 156;
x[24] = 454;
y[24] = 156;
x[25] = 397;
y[25] = 156;
x[26] = 341;
y[26] = 171;
x[27] = 270;
y[27] = 171;
x[28] = 199;
x[28] = 156;
x[29] = 114;
y[29] = 156;

var G=[];
G[0]=4;
G[1]=10;
G[2]=13;
G[3]=17;
G[4]=20;
G[5]=22;
G[6]=25;
G[7]=27;

var TypeG=[];
TypeG[0]=0;
TypeG[1]=1;
TypeG[2]=1;
TypeG[3]=2;
TypeG[4]=2;
TypeG[5]=2;
TypeG[6]=0;
TypeG[7]=0;

var name1 = [];
var icon = [];
var play;
var num;
var i;
var j;
var k;
var keep=0;


function printname(name, x, y) {
	var k;
	for ( k = 0; k < 100; k++) {
		ctx.font = "15px Impact";
		ctx.fillText(name, x, y);
	}
}


function drawpic(address, x, y) {
	var pic1 = new Image();
	pic1.onload = function() {
		ctx.drawImage(pic1, x, y);
	};
	pic1.src = address;
	return pic1;
}

function showscore() {
	ctx.clearRect(0,0,858,520);
	drawpic(picscore,(858/2)-(550/2),(520/2)-(304/2));
	
	ctx.strokeStyle = "white";
	ctx.strokeRect(0, 0, 858, 520);
	drawpic(picok,(858/2)-(100/2),(520/2)-(304/2)+200);
	ctx.clearRect((858/2)-(50/2),(520/2)-(100/2),80,50);
	//printname(winner.Name+" : "+winner.score, (858/2)-(50/2),(520/2)-(100/2));
	
}


function point(x1, y1, n1) {
	this.x = x1;
	this.y = y1;
	this.p = 0;
	this.p2 = 0;
	this.n = n1;

	this.Setxy = function Setxy(x2, y2) {
		this.x = x2;
		this.y = y2;
	};

	this.SetIcon = function SetIcon() {
		drawpic(picpoint, this.x, this.y);
	};
	this.ClearIcon = function ClearIcon() {

	};
	/*this.move = function move(e) {
	 if(this.p<this.n-1){
	 drawpic(green,this.x,this.y);
	 this.Setxy(this.x+(500/(this.n+1)),this.y);
	 this.SetIcon();
	 this.p++;
	 }
	 };*/

}



function move(e) {

	offsetX = e.pageX - document.getElementById('myCanvas').offsetLeft;
	offsetY = e.pageY - document.getElementById('myCanvas').offsetTop;
	
	
	if (offsetX > (858 / 2) - (500 / 2) + 375 && offsetX < (858 / 2) - (500 / 2) + 375 + 90 && offsetY > (520 / 2) - (500 / 2) + 425 && offsetY < (520 / 2) - (500 / 2) + 425 + 50) {		

			point.p++;
			if (point.p < 3 && point.p >= 0) {
				drawpic(green, point.x, point.y);
				point.Setxy(point.x + 144, point.y);
				point.SetIcon();
			} else point.p--;
		
	}	

	if (offsetX > (858 / 2) - (500 / 2) + 40 && offsetX < (858 / 2) - (500 / 2) + 40 + 90 && offsetY > (520 / 2) - (500 / 2) + 425 && offsetY < (520 / 2) - (500 / 2) + 425 + 50) {
		
			point.p--;
			if(point.p<3 && point.p>=0){
				drawpic(green, point.x, point.y);
				point.Setxy(point.x - 144, point.y);
				point.SetIcon();
			}
			else point.p++;	
		
	}
	if (offsetX > (858 / 2) - (500 / 2) + 207 && offsetX < (858 / 2) - (500 / 2) + 207 + 100 && offsetY > (520 / 2) - (500 / 2) + 407 && offsetY < (520 / 2) - (500 / 2) + 407 + 80) {
		drawpic(green, point.x, point.y);
		drawpic(green, garbage[winner.KeepG[point.p2]].x, garbage[winner.KeepG[point.p2]].y);
		drawpic(green, garbage[winner.KeepG[point.p2]].x, garbage[winner.KeepG[point.p2]].y+15);
		if(point.p==garbage[winner.KeepG[point.p2]].type)
			winner.score = winner.score+1000;
		if(point.p2<point.n-1){
			point.p2++;
			drawpic(picchoose,(858 / 2) - (500 / 2) + (((500 / (winner.countG + 1))) * (point.p2 + 1) - 30), (520 / 2) - (400 / 2) + 50 + 220 +60);
			point.Setxy((858 / 2) - (500 / 2) + 140, (520 / 2) - (500 / 2) + 75 + 200);
			point.p=0;
			point.SetIcon();
		}
		else{
			alert("Score of "+winner.Name+" : "+winner.score);
			drawpic(picans,0,0);
			//ctx.font = "30px Impact";ctx.fillText(winner.score,(858/2)-(50/2),(520/2)-(100/2));
		}
			
		
			/*point.at=point.at*(-1);
		if(point.at==1){
			point.Setxy(garbage[winner.KeepG[0]].x+30,garbage[winner.KeepG[0]].y+55);
			point.SetIcon();
			point.p=0;
		}
		if(point.at==-1){
			point.Setxy((858/2)-(500/2)+140,(520/2)-(500/2)+75+209);
			point.SetIcon();
			point.p2=0;
		}*/
	}
		
	
}


function garbage(code1, x1, y1, type1) {
	this.code = code1;
	this.x = x1;
	this.y = y1;
	this.type = type1;

	this.Setxy = function Setxy(x2, y2) {
		this.x = x2;
		this.y = y2;
	};

	this.SetIcon = function SetIcon() {
		drawpic(picgarbage[this.code], x[this.x] - 35, y[this.y] - 35);
	};
	this.SetIcon2 = function SetIcon2() {
		drawpic(picgarbage[this.code], this.x, this.y);
	};
}



function garbageall(mode) {

	if (mode == 0) {
		for ( k = 0; k < 8; k++) {
			garbage[k] = new garbage(k, G[k], G[k], TypeG[k]);
		}
	}
	for ( k = 0; k < 8; k++) {
		if (garbage[k].x == 0) {
		} else
			garbage[k].SetIcon();
	}
}



function bin(type1, x1, y1) {
	this.type = type1;
	this.x = x1;
	this.y = y1;

	this.SetIcon = function SetIcon() {
		drawpic(picbin[this.type], this.x, this.y);
	};

}





function classify() {
	drawpic(window1, (858 / 2) - (500 / 2), (520 / 2) - (500 / 2));
	for ( k = 0; k < 3; k++) {
		bin[k] = new bin(k, (858 / 2) - (500 / 2) + (144 * k) + 40, (520 / 2) - (500 / 2) + 75);
		bin[k].SetIcon();
	}
	for ( k = 0; k < winner.countG; k++) {
		garbage[winner.KeepG[k]].Setxy((858 / 2) - (500 / 2) + (((500 / (winner.countG + 1)) * (k + 1)) - 30), (520 / 2) - (400 / 2) + 50 + 220);
		garbage[winner.KeepG[k]].SetIcon2();
		//printname(winner.KeepG[k],100,100+100*k);
	}
	drawpic(picchoose,(858 / 2) - (500 / 2) + (((500 / (winner.countG + 1))) - 30), (520 / 2) - (400 / 2) + 50 + 220 +60);
	point = new point((858 / 2) - (500 / 2) + 140, (520 / 2) - (500 / 2) + 75 + 200, winner.countG);
	point.SetIcon();
	drawpic(picleft, (858 / 2) - (500 / 2) + 40, (520 / 2) - (500 / 2) + 425);
	drawpic(picright, (858 / 2) - (500 / 2) + 375, (520 / 2) - (500 / 2) + 425);
	drawpic(picok, (858 / 2) - (500 / 2) + 207, (520 / 2) - (500 / 2) + 407);
	c.addEventListener("click", move, false);
}



function player(name, icon) {
	this.Name = name;
	this.x = 0;
	this.y = 0;
	this.Iconnum = icon;
	this.KeepG = [];
	this.countG = 0;
	this.score = 0;

	this.SetIcon = function SetIcon() {
		printname(this.Name, x[this.x] - 55, y[this.y] - 55 + 110);
		drawpic(picicon[icon - 1], x[this.x] - 55, y[this.y] - 55);
	};

	this.move = function move(step) {
		ctx.clearRect(x[this.x] - 55, y[this.y] - 55, 110, 110 + 30);
		this.x = this.x + step;
		this.y = this.y + step;
		if (this.x >= 29 || this.y >= 29) {
			play = 0;
			printname(this.Name, x[29] - 55, y[29] - 55 + 110);
			drawpic(picicon[icon - 1], x[29] - 55, y[29] - 55);
			alert("Congratulation!" + this.Name + " win!!");
			winner = this;
			classify();
		} else {
			printname(this.Name, x[this.x] - 55, y[this.y] - 55 + 110);
			drawpic(picicon[icon - 1], x[this.x] - 55, y[this.y] - 55);
		}

	};
}



function Setvalue() {
	do {
		num = prompt("Please select the number of player 1-4");
		if (num <= 0)
			alert("The number of player is too less,please try again.");
		else if (num > 4)
			alert("The number of player is too much,please try again.");
	} while(num<=0 || num>4);

	for ( i = 0; i < num; i++) {
		name1[i] = prompt("Please enter the name of player[" + (i + 1) + "]");

		do {
			//popupwindow("choose.html", "::เลือกตัวละคร::", 850, 375);
			icon[i] = prompt("Please choose character(1 : cat,2 : cow,3 : tiger,4 : rabbit)");
			if (icon[i] <= 0 || icon[i] > 4)
				alert("Please enter number of character between 1 to 4,try again");
		} while(icon[i]<=0 || icon[i]>4);
	}

	for ( i = 0; i < num; i++) {
		player[i] = new player(name1[i], icon[i]);
		//document.write(player[i].Name);
		//document.write(icon[i]);
		player[i].SetIcon();
		//player[i].move(5);
	}
}



garbageall(0);
alert("Welcome to Snakes and Ladder");
Setvalue();
play=1;


while (play) {
	for ( i = 0; i < num; i++) {

		alert(player[i].Name + " (Player[" + (i + 1) + "]) : Random!!!");
		player[i].move(Math.round(Math.random() * 5) + 1);
		if (play == 0)
			break;
		for ( j = 0; j < 8; j++) {
			if (player[i].x == garbage[j].x) {
				garbage[j].x = 0;
				garbage[j].y = 0;
				player[i].KeepG[player[i].countG] = j;
				player[i].countG++;
				keep = 1;
			}
		}

		garbageall(1);
		for ( j = 0; j < num; j++) {
			player[j].SetIcon();
			//player[j].Icon = new drawpic(picicon[player[j].icon-1],x[player[j].x]-55,y[player[j].y]-55);
			//ctx.font="15px Impact";ctx.fillText(player[j].Name,x[player[j].x]-55,y[play[j].y]-55+110);
		}

		if (keep == 1) {
			alert(player[i].Name + "(Player[" + (i + 1) + "]) kept a garbage.");
			keep = 0;
		}

	}
}
